<template>
  <div class="cityInfoManagement">
    <div class="area">区域修改</div>
    <el-form :inline="true" :model="choose" class="demo-form-inline">
      <el-form-item label="区域：">
        <el-select v-model="choose.areaId" placeholder="请选择区域" size="mini" filterable @change="handlearea">
          <el-option :label="item.name" :value="item.id" v-for="(item,idx) in areaList" :key="idx"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="省份：">
        <el-select v-model="choose.provinceId" placeholder="请选择省份" size="mini" filterable :disabled="choose.areaId?false:true" @change="handlePro">
          <el-option :label="item.province" :value="item.provinceid" v-for="(item,idx) in provinceList" :key="idx"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市：">
        <el-select v-model="choose.cityId" placeholder="请选择城市" size="mini" filterable :disabled="choose.provinceId?false:true">
          <el-option :label="item.city" :value="item.cityid" v-for="(item,idx) in cityList" :key="idx"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCheck" size="mini" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="handleBtn(1)" size="mini">添加</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="listData"
        border
        style="width: 1000px">
        <el-table-column
          align="center"
          fixed
          prop="regionName"
          label="序号"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="regionName"
          label="区域"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="city"
          label="城市"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="cityid"
          label="城市代号"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="area"
          label="区/县"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="areaid"
          label="区代号"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleBtn(2,scope.row)" type="text" size="small">设置区域</el-button>
            <el-button @click="handleBtn(3,scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      style="margin-top:20px"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageData.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageData.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    <!-- 添加 -->
    <el-dialog
      title="添加区域"
      :visible.sync="dialogVisibleAdd"
      width="400px"
      :before-close="handleClose">
      <el-form :inline="true" class="demo-form-inline" label-width="60px" label-position="left">
        <el-form-item label="省份">
          <el-select v-model="addForm.provinceAllId" placeholder="" size="mini" @change="handlePro">
            <el-option :label="item.province" :value="item.provinceid" v-for="(item,idx) in provinceListAll" :key="idx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="addForm.radio">
            <el-radio label="city">城市</el-radio>
            <el-radio label="area">区/县</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="城市"  v-if="addForm.radio == 'city'">
          <el-input v-model="addForm.cityName" placeholder="" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="城市"  v-if="addForm.radio == 'area'">
        <el-select v-model="addForm.cityId1" placeholder="" size="mini" filterable>
          <el-option :label="item.city" :value="item.cityid" v-for="(item,idx) in cityListAdd" :key="idx"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="市代号" v-if="addForm.radio" >
          <el-input v-model="addForm.cityId1" placeholder=""  size="mini" :disabled="addForm.radio == 'city'?false:true" v-show="addForm.radio == 'area'"></el-input>
          <el-input v-model="addForm.cityId2" placeholder=""  size="mini" :disabled="addForm.radio == 'city'?false:true" v-show="addForm.radio == 'city'"></el-input>
        </el-form-item>
        <el-form-item label="区域" v-if="addForm.radio == 'area'">
          <el-input v-model="addForm.areaName" placeholder=""  size="mini"></el-input>
        </el-form-item>
        <el-form-item label="区代号" v-if="addForm.radio == 'area'">
          <el-input v-model="addForm.areaId" placeholder=""  size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </span>
    </el-dialog>
    <!-- 设置区域 -->
    <el-dialog
      title="设置区域"
      :visible.sync="dialogVisibleSet"
      width="400px"
      :before-close="handleClose">
      <el-form :inline="true" class="demo-form-inline" label-width="60px" label-position="left">
        <el-form-item label="区域">
          <el-select v-model="setForm.regionId" placeholder="" size="mini">
            <el-option :label="item.name" :value="item.id" v-for="(item,idx) in areaList" :key="idx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份" >
          <el-input v-model="setForm.proName" placeholder=""  size="mini" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left">
        <el-button type="primary" @click="handleSaveSet">保存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="编辑区域"
      :visible.sync="dialogVisibleEdit"
      width="400px"
      :before-close="handleClose">
      <el-form :inline="true" class="demo-form-inline" label-width="60px" label-position="left">
        <el-form-item label="省份" >
          <el-input v-model="editForm.proName" placeholder=""  size="mini" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="editForm.radio">
            <el-radio label="area">区/县</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="城市" >
          <el-input v-model="editForm.cityName" placeholder=""  size="mini" disabled style="width:120px"></el-input>
          <el-input v-model="editForm.cityId" placeholder=""  size="mini" disabled style="width:120px"></el-input>
        </el-form-item>
        <el-form-item label="区域" >
          <el-input v-model="editForm.areaName" placeholder=""  size="mini"  style="width:120px"></el-input>
          <el-input v-model="editForm.areaId" placeholder=""  size="mini"  style="width:120px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left">
        <el-button type="primary" @click="handleSaveEdit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:"cityInfoManagement",
  title:'城市信息管理',
  components: {},
  data() {
    return {
      dialogVisibleAdd: false,
      dialogVisibleSet: false,
      dialogVisibleEdit: false,
      choose: {
        areaId: '',
        provinceId: '',
        cityId:''
      },
      listData:[],
      areaList:[],
      provinceList:[],
      provinceListAll:[],
      addForm:{
        provinceAllId:'',
        radio:'city',
        cityName:'',
        cityId1:'',
        cityId2:'',
        areaName:'',
        areaId:''
      },
      setForm:{
        regionId:'',
        provinceid:'',
        proName:''
      },
      editForm:{
        proName:'',
        radio:'area',
        cityName:'',
        cityId:'',
        areaName:'',
        areaId:''
      },
      cityList:[],
      pageData:{
        pageSize:10,
        pageNum:1
      },
      total:0,
      cityListAdd:[]
    }
  },
  mounted() {},
  created() {
    this.getAreaData()
    this.getProvincesAllData()
    this.getListData()
  },
  activated(){
    this.getListData()
  },
  methods: {
    handleBtn(val,row){
      // 添加
      if(val == 1){
        this.dialogVisibleAdd = true
      }else if(val == 2){
        // 设置区域
        this.setForm.regionId = row.regionId
        this.setForm.provinceid = row.provinceid
        this.setForm.proName = row.province
        this.dialogVisibleSet = true
      }else if(val == 3){
        // 编辑
        this.dialogVisibleEdit = true
        this.editForm.proName = row.province
        this.editForm.cityName = row.city
        this.editForm.cityId = row.cityid
        this.editForm.areaName = row.area
        this.editForm.areaId = row.areaid
        if(row.areaid){
          this.editForm.id = row.areaForId
        }else{
          this.editForm.id = ''
        }
      }
    },
    // 设置区域-保存
    handleSaveSet(){
      this.$axios.post('city/provinces/update/regionId',{
        provinceid:this.setForm.provinceid,
        regionId:this.setForm.regionId
      }).then(res=>{
        this.$message({
          type:'success',
          message:'设置区域成功'
        })
        this.dialogVisibleSet = false
        this.getListData()
      })
    },
    // 编辑-保存
    handleSaveEdit(){
      if(!this.editForm.areaName || !this.editForm.areaId){
        this.$message({
          type:'warning',
          message:'请填写完整区县信息'
        })
        return 
      }
      this.$axios.post('/city/sysCity/updateForCity',{
        areaid:this.editForm.areaId,
        cityid:this.editForm.cityId,
        id:this.editForm.id,
        name:this.editForm.areaName,
        type:'area'
      }).then(res=>{
        this.$message({
          type:'success',
          message:'编辑成功'
        })
        this.dialogVisibleEdit = false
        this.getListData()
      })
    },
    // 添加-保存
    handleSave(){
      if(this.addForm.radio == 'city'){
        if(!this.addForm.provinceAllId || !this.addForm.cityName || !this.addForm.cityId2){
          this.$message({
            type:'warning',
            message:'请填写完整城市信息'
          })
          return
        }
      }else if(this.addForm.radio == 'area'){
        if(!this.addForm.provinceAllId || !this.addForm.cityId1 || !this.addForm.areaName || !this.addForm.areaId){
          this.$message({
            type:'warning',
            message:'请填写完整城市信息'
          })
          return
        }
        }
      let params = {}
      if(this.addForm.radio == 'area'){
        params.CityId = this.addForm.cityId1,
        params.name = this.addForm.areaName,
        params.areaId = this.addForm.areaId,
        params.type = this.addForm.radio
      }else if(this.addForm.radio == 'city'){
        params.CityId = this.addForm.cityId2,
        params.name = this.addForm.cityName,
        params.provinceid = this.addForm.provinceAllId,
        params.type = this.addForm.radio
      }
      this.$axios.post('/city/sysCity/insertForCity',params).then(res=>{
        this.$message({
          type:'success',
          message:'添加成功'
        })
        this.dialogVisibleAdd = false
        this.getListData()
        this.clearData()
      })
    },
    // 保存成功，清空数据
    clearData(){
      this.addForm = {
        provinceAllId:'',
        radio:'city',
        cityName:'',
        cityId1:'',
        cityId2:'',
        areaName:'',
        areaId:''
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleCheck() {
      this.getListData()
    },
    
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getListData()
    },
    handleCurrentChange(val) {
      this.getListData()
    },
    // 列表数据
    getListData(){
      this.$axios.post('/city/sysCity/getAll',{
        cityid:this.choose.cityId,
        provinceid:this.choose.provinceId,
        regionId:this.choose.areaId,
        pageSize:this.pageData.pageSize,
        pageNum:this.pageData.pageNum
      }).then(res=>{
        this.listData = res.list
        this.total = res.total
      })
    },
    // 获取区域
    getAreaData(){
      this.$axios.get('/city/region/all').then(res=>{
        this.areaList = res
        this.areaList.unshift({
          id:'',
          name:'全部'
        })
      })
    },
    // 根据区域id获取省份
    handlearea(val){
      this.$axios.post('/city/provinces/get/regionId',{
        regionId:val,
      }).then(res=>{
        this.provinceList = res
        let provinceList = JSON.stringify(this.provinceList)
        this.provinceListAdd = JSON.parse(provinceList)
        this.provinceList.unshift({
          provinceid:'',
          province:'全部'
        })
        this.choose.provinceId = ''
        this.cityList = []
        this.choose.cityId = ''
      })
    },
    
    // 根据省份id获取城市
    handlePro(val){
      if(!this.dialogVisibleAdd){
        this.choose.cityId = ''
      }else{
        this.addForm.cityId1 = ''
      }
      this.$axios.post('/city/sysCity/getForAll',{
        provinceId:val,
        type:'city'
      }).then(res=>{
        if(!this.dialogVisibleAdd){
          this.cityList = res
        }else{
          this.cityListAdd = res
        }
      })
    },
    // 获取全部省份
    getProvincesAllData(){
      this.$axios.post('/city/sysCity/getForAll',{
        id:'provinceid',
        type:"provinces"
      }).then(res=>{
        this.provinceListAll = res
      })
    },
  },
  computed: {}
}
</script>
<style lang="stylus" scoped>
  .cityInfoManagement {
      .area{
        margin-bottom :30px;
        font-size :16px;
      }
  }
</style>